<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><?php $this->archiveTitle(array(
        'category'  =>  _t('分类 %s 下的文章'),
        'search'    =>  _t('包含关键字 %s 的文章'),
        'tag'       =>  _t('标签 %s 下的文章'),
        'author'    =>  _t('%s 发布的文章')
    ), '', ' - '); ?><?php $this->options->title(); ?></title>
    
    <!-- 使用 header 加载资源 -->
    <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/style.css'); ?>?v=<?php echo _t('1.0.0'); ?>" />
    
    <!-- 通过自定义字段加载网站图标 -->
    <?php if ($this->options->favicon): ?>
    <link rel="shortcut icon" href="<?php $this->options->favicon(); ?>" />
    <?php endif; ?>
    
    <!-- 输出 header -->
    <?php $this->header(); ?>
</head>
<body class="bg-gray-100">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-2 flex items-center justify-between">
            <!-- 移动端菜单按钮 -->
            <div class="block md:hidden">
                <button 
                    id="mobile-menu-button"
                    class="text-gray-500 hover:text-gray-700 focus:outline-none">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
            </div>
            
            <!-- 站点标题 -->
            <div class="text-xl font-bold text-center flex-1 md:flex-none md:text-left">
                <a href="<?php $this->options->siteUrl(); ?>" class="text-gray-800 no-underline hover:text-gray-600"><?php $this->options->title(); ?></a>
            </div>
            
            <!-- 导航菜单 -->
            <nav class="hidden md:flex items-center space-x-6">
                <a href="<?php $this->options->siteUrl(); ?>" class="text-gray-700 hover:text-gray-900"><?php _e('首页'); ?></a>
                <?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
                <?php while($pages->next()): ?>
                <a href="<?php $pages->permalink(); ?>" class="text-gray-700 hover:text-gray-900"><?php $pages->title(); ?></a>
                <?php endwhile; ?>
            </nav>
            
            <!-- 搜索框 -->
            <div class="hidden md:block relative">
                <form method="get" action="<?php $this->options->siteUrl(); ?>">
                    <input type="text" name="s" placeholder="搜索..." 
                           class="pl-3 pr-10 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <button type="submit" class="absolute right-2 top-1/2 transform -translate-y-1/2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </button>
                </form>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="hidden md:hidden">
            <div class="px-4 py-3 bg-white border-t">
                <a href="<?php $this->options->siteUrl(); ?>" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 rounded-md"><?php _e('首页'); ?></a>
                <?php while($pages->next()): ?>
                <a href="<?php $pages->permalink(); ?>" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 rounded-md"><?php $pages->title(); ?></a>
                <?php endwhile; ?>
                
                <!-- 搜索框 - 移动端 -->
                <div class="mt-4 px-4">
                    <form method="get" action="<?php $this->options->siteUrl(); ?>" class="flex">
                        <input type="text" name="s" placeholder="搜索..." 
                               class="flex-1 pl-3 pr-10 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <button type="submit" class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-md">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </header>
    
    <!-- 主要内容区 -->
    <main class="container mx-auto py-8 px-4">
        <div class="a4-paper">